<template>
  <div class="employee-container">
    <el-card>
      <el-row>
        <el-button
          type="success"
          size="small"
          class="buttonStyle"
          @click="addPatternClick"
        >添加工作模式</el-button>
      </el-row>
      <el-row class="card-box">
        <el-table :data="tableData" stripe style="width: 100%" border>
          <el-table-column
            align="center"
            prop="id"
            label="工作账号编号"
            width="204.6"
          />
          <el-table-column
            align="center"
            prop="name"
            label="工作模式"
            width="204.6"
          />
          <el-table-column
            align="center"
            prop="workPatternTypeDesc"
            label="类型"
            width="204.6"
          />
          <el-table-column
            align="center"
            prop="workDate"
            label="工作日期"
            width="204.6"
          />
          <el-table-column
            align="center"
            prop="workPatternId"
            label="工作时间"
            width="204.6"
          />
          <el-table-column
            align="center"
            prop="workPatternId"
            label="操作"
            width="204.6"
            fixed="right"
          >
            <template #default="{ row }">
              <el-row align="middle" type="flex" justify="center">
                <el-button
                  type="text"
                  size="small"
                  @click="editClick(row)"
                >编辑</el-button>
                <div class="centerLine" />
                <el-button
                  style="color: red"
                  type="text"
                  size="small"
                  @click="deleteClick(row)"
                >删除</el-button>
              </el-row>
            </template>
          </el-table-column>
          <template slot="empty">
            <el-empty :image-size="150" description="暂无数据" />
          </template>
        </el-table>
      </el-row>
      <el-row
        type="flex"
        justify="center"
        style="margin-top: 10px; height: 40px"
        align="middle"
      >
        <el-pagination
          :current-page="form.page"
          :page-sizes="[10, 20, 30, 40]"
          :page-count="pages"
          :page-size="form.pageSize"
          :pager-count="7"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="sizeChange"
          @current-change="gurrentChange"
        />
      </el-row>
    </el-card>
    <!-- 编辑工作模式 -->
    <el-dialog
      class="addDialog"
      :title="id ? '编辑工作模式' : '新增工作模式'"
      :visible.sync="dialogFormVisible"
      width="50%"
    >
      <el-tabs v-model="activeName" @tab-click="tabClick">
        <el-tab-pane
          v-if="
            !!(!id && !addVehicleForm.workPatternTypeDesc) ||
              (id && addVehicleForm.workPatternTypeDesc === '礼拜制')
          "
          label="礼拜制"
          name="workday"
        >
          <el-form
            ref="addDialogForm"
            :model="addVehicleForm"
            :rules="rules"
            label-width="auto"
          >
            <el-form-item
              label="工作模式名称"
              prop="name"
              style="margin-top: 20px"
            >
              <el-input
                v-model="addVehicleForm.name"
                class="dialogInputStyle"
                placeholder="请输入工作模式名称"
                autocomplete="off"
                clearable
              />
            </el-form-item>
            <el-form-item label="连续上班天数" prop="workday">
              <div>
                <el-checkbox-group
                  v-model="checkedWeek"
                  @change="checkedCitiesChange"
                >
                  <el-checkbox v-for="item in week" :key="item" :label="item">{{
                    item
                  }}</el-checkbox>
                </el-checkbox-group>
              </div>
              <div>
                <span> 选中为工作时间，未选中为休息时间 </span>
              </div>
            </el-form-item>
            <el-form-item label="工作时间">
              <el-time-picker
                v-model="timeArr"
                is-range
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                placeholder="选择时间范围"
                format="HH:mm"
              />
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane
          v-if="
            !!(!id && !addVehicleForm.workPatternTypeDesc) ||
              (id && addVehicleForm.workPatternTypeDesc === '连续制')
          "
          label="连续制"
          name="continuous"
        >
          <el-form
            ref="addDialogForm"
            :model="addVehicleForm"
            :rules="rules"
            label-width="auto"
          >
            <el-form-item
              label="工作模式名称"
              prop="truckTypeId"
              style="margin-top: 20px"
            >
              <el-input
                v-model="addVehicleForm.name"
                class="dialogInputStyle"
                placeholder="请输入工作模式名称"
                autocomplete="off"
                clearable
              />
            </el-form-item>
            <el-form-item label="连续上班天数" prop="deviceGpsId">
              <el-row type="flex" justify="start">
                <span>上</span>
                <el-input v-model="addVehicleForm.workDayNum" />
                <span>天</span>
                <span>休</span>
                <el-input v-model="addVehicleForm.restDayNum" />
                <span>天</span>
              </el-row>
            </el-form-item>
            <el-form-item label="工作时间" prop="deviceGpsId">
              <el-time-picker
                v-model="timeArr"
                is-range
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                placeholder="选择时间范围"
                format="HH:mm"
              />
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>

      <div slot="footer" class="dialog-footer">
        <el-button
          size="small"
          class="buttonStyle"
          type="primary"
          @click="dialogConfirm"
        >确 定</el-button>
        <el-button
          size="small"
          class="buttonStyle"
          @click="dialogCancel"
        >取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  addPatternsAPI,
  delPatternsAPI,
  editParrernsAPI,
  getPatternsDetailAPI,
  getPatternsListAPI
} from '@/api/employee'
export default {
  name: 'SchedulingLIst',
  data() {
    return {
      form: {
        page: 1,
        pageSize: 10
      },
      id: null,
      timeArr: [new Date(), new Date()],
      pages: 1,
      total: 0,
      tableData: [],
      rules: {},
      activeName: 'workday',
      addVehicleForm: {
        friday: '',
        id: '',
        monday: '',
        name: '',
        operator: '',
        restDayNum: '',
        saturday: '',
        sunday: '',
        thursday: '',
        tuesday: '',
        wednesday: '',
        workDayNum: '',
        workEndMinute1: '',
        workStartMinute1: ''
      },
      // 弹框开关
      dialogFormVisible: false,
      // 星期
      week: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
      checkedWeek: []
      //       monday
      // tuesday
      // wednesday
      // thursday
      // friday
      // saturday
      // sunday
    }
  },
  computed: {},
  watch: {
    dialogFormVisible(val) {
      if (!val) {
        this.$refs.addDialogForm.resetFields()
        setTimeout(() => {
          this.id = null
        }, 300)
      }
    }
  },
  created() {
    this.tableListData()
  },
  methods: {
    // 表格数据
    async tableListData() {
      const { data } = await getPatternsListAPI(this.form)
      const itemData = data.data
      this.tableData = itemData.items
      this.total = +itemData.total
      this.pages = +itemData.pages
    },
    // 编辑
    async editClick(row) {
      this.id = row.id
      this.dialogFormVisible = true
      const { data } = await getPatternsDetailAPI(row.id)
      const itemData = data.data
      this.activeName =
        itemData.workPatternTypeDesc === '礼拜制' ? 'workday' : 'continuous'
      this.checkedWeek = this.test(itemData.workDate)
      this.timeArr = [
        new Date(itemData.workStartMinute1),
        new Date(itemData.workEndMinute1)
      ]
      this.addVehicleForm = itemData
    },
    // 删除
    async deleteClick(row) {
      this.$confirm('确定要删除码?', '删除确认', {
        confirmButtonText: '确定',
        confirmButtonClass: 'el-button--success',
        cancelButtonText: '取消'
      })
        .then(() => {
          delPatternsAPI(row.id)
          this.tableListData()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      // await delPatternsAPI()
    },
    // 新增工作模式
    addPatternClick() {
      this.dialogFormVisible = true
      this.activeName = 'workday'
    },
    // tab切换
    tabClick(key) {
      this.activeName = key.name
    },
    // 确定
    async dialogConfirm() {
      const start = new Date(this.timeArr[0])
      const end = new Date(this.timeArr[1])
      this.activeName === 'workday'
        ? (this.addVehicleForm.workPatternType = 1)
        : (this.addVehicleForm.workPatternType = 2)
      this.addVehicleForm.workStartMinute1 = start.getMinutes()
      this.addVehicleForm.workEndMinute1 = end.getMinutes()
      if (this.activeName === 'workday') {
        this.addVehicleForm.monday = this.addVehicleForm.monday ? 1 : 2
        this.addVehicleForm.tuesday = this.addVehicleForm.tuesday ? 1 : 2
        this.addVehicleForm.wednesday = this.addVehicleForm.wednesday ? 1 : 2
        this.addVehicleForm.thursday = this.addVehicleForm.thursday ? 1 : 2
        this.addVehicleForm.friday = this.addVehicleForm.friday ? 1 : 2
        this.addVehicleForm.saturday = this.addVehicleForm.saturday ? 1 : 2
        this.addVehicleForm.sunday = this.addVehicleForm.sunday ? 1 : 2
        await addPatternsAPI(this.addVehicleForm)
      } else {
        await editParrernsAPI(this.addVehicleForm, this.id)
      }
      this.tableListData()
      this.dialogFormVisible = false
    },

    // 取消
    dialogCancel() {
      this.dialogFormVisible = false
      this.tableListData()
    },
    checkedCitiesChange() {},
    // 当前页数量改变
    sizeChange(pageSize) {
      this.form.pageSize = pageSize
      this.tableListData()
    },
    // 当前页改变
    gurrentChange(page) {
      this.form.page = page
      this.tableListData()
    },
    // 测试
    test(workDate) {
      const result = workDate.replace(/\s*\(.*?\)\s*/g, ' ').trim().split(' ')
      return result
    }
  }
}
</script>

<style lang="scss" scoped>
.employee-container {
  padding: 0 20px;
  .buttonStyle {
    margin-bottom: 20px;
    height: 30px;

    &.buttonStyle:first-child {
      background-color: #189450;
      border-color: #189450;
      margin-right: 10px;

      &:hover {
        opacity: 0.7;
      }
    }
  }
}
.centerLine {
  box-sizing: border-box;
  margin: 0 10px;
  width: 1px;
  height: 13px;
  background: #d0d3da;
}
.addDialog {
  ::v-deep .el-dialog {
    border-radius: 10px;
  }
  .dialogInputStyle {
    position: relative;
    width: 320px;
    height: 30px;
  }
  ::v-deep .el-dialog__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-radius: 10px 10px 0 0;
    background-color: #f3f4f7;
  }
  ::v-deep .el-dialog__title {
    font-size: 15px;
    font-weight: bold;
  }
  ::v-deep .el-dialog__headerbtn {
    position: static;
    background: 0 0;
    border: none;
    outline: 0;
    cursor: pointer;
    font-size: 16px;
  }
  ::v-deep .el-dialog__body {
    display: flex;
    justify-content: center;
    padding: 20px 25px 20px;
    font-size: 13px;
  }
  .buttonStyle {
    width: 80px;
    height: 30px;

    &.buttonStyle:first-child {
      background-color: #189450;
      border-color: #189450;
      margin-right: 10px;

      &:hover {
        opacity: 0.7;
      }
    }
  }
  .units {
    position: absolute;
    right: 25px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-block;
    height: 30px;
    line-height: 30px;
    text-align: right;
    font-size: 13px;
    color: #606266;
  }
}
.el-checkbox {
  margin: 5px;
}
.warningText {
  height: 0;
}
::v-deep .el-form-item__label {
  font-size: 13px;
}

::v-deep .el-table thead tr th {
  font-size: 13px;
  font-weight: bold;
  background: #f8faff !important;
  border: none;
}
::v-deep .el-table tbody tr td {
  font-size: 13px;
  color: #606266;
  border: none;
}
</style>
